@import '@/variables.less';

.home_container {
  width: 100vw;
  height: 100vh;
  background-color: #002138;
  position: relative;
  .home_header {
    width: 100%;
    height: 6.607rem  /* 74/11.2 */;
    background-image: url(@/assets/images/top1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    line-height: 4rem  /* 74/11.2 */;
    img {
      width: 25px;
      height: 25px;
      margin-left: 1rem;
      margin-right: 5px;
      margin-top: 1.2rem;
    }
  }
  .home_con {
    padding: 0 18px;
    box-sizing: border-box;
    display: flex;
    height: calc(100% - 6.607rem);
    .home_con_left {
      width: 60%;
      // 当月战报
      .home_con_left_top {
        //height: 22.321rem  /* 250/11.2 */;
        .home_con_left_top_icon {
          height: 3rem;
          position: relative;
          background-image: url(@/assets/images/top2.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          color: #fff;
          font-size: 20px;
          line-height: 3rem;
          align-items: center;
          padding-left: 1rem;
          .home_con_left_top_icon_title_icon {
            width: 125px;
            height: 13px;
            background-image: url(@/assets/images/top6.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: .5rem;
          }
          .home_con_left_top_icon_title {
            position: absolute;
            left: 0.893rem  /* 10/11.2 */;
            top: .4rem;
            color: #fff;
            font-size: 20px;
            font-weight: 500;
            text-align: center;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .home_con_left_top_con {
          //height: 18rem;
          display: flex;
          justify-content: space-around;
          border: 1px solid #004B65;
          border-top: none;
          border-radius: 10px;
          padding: 2.7rem;
          box-sizing: border-box;
        li {
            display: flex;
            color: #fff;
            justify-content: center;
            align-items: center;
            img {
              //width: 6rem;
              //height: 6rem;
              width: 10.714rem  /* 120/11.2 */;
              height: 10.714rem  /* 120/11.2 */;
              margin-right: 10px;
            }
            .home_con_left_top_con_count {
              display: flex;
              flex-direction: column;
              justify-content: center;
              span:nth-child(1) {
                font-size: 1rem;
              }
              span:nth-child(2) {
                font-size: 3rem;
                font-weight: bold;
              }
            }
          }
        }
      }
      // 当月销售业绩排名
      .home_con_left_top_table {
        margin-top: 1.518rem  /* 20/11.2 */;
        display: flex;
        flex-direction: column;
        .home_con_left_top_table_con {
          max-height: 35.5rem  /* 631/11.2 */;
          height: 35.5rem  /* 631/11.2 */;
          display: flex;
          //border: 1px solid #004B65;
          border-top: none;
          border-radius: 10px;
          padding-bottom: 0.893rem  /* 10/11.2 */;
          box-sizing: border-box;
          background-image: url(@/assets/images/left_table_bg.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .table-container {
            width: calc(50% - 10px);
            height: 100%;
            display: flex;
            flex-direction: column;
            &:first-child {
              margin-right: 20px;
            }
            .custom-table {
              --el-table-bg-color: var(--el-table-bg-color);
              --el-table-border-color: var(--el-table-border-color);
              .el-table__header {
                .el-table__cell {
                  font-size: 16px;
                  color: #00BCE7;
                }
              }
              &.scroll-table-container {
                //height: calc(100% - 16.214rem);
                .el-table__inner-wrapper {
                  .el-table__header-wrapper {
                    height: 0;
                  }
                }
              }
              &.fixed-table-container {
                height: 16.214rem;  /* 260/11.2 */
                .el-table__header {
                  tr {
                    background: none;
                  }
                }
                .el-table__row {
                  position: relative;
                  &:nth-child(1) {
                    background-image: url(@/assets/images/left_table_top3.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    top: 10px;
                  }
                  &:nth-child(2) {
                    background-image: url(@/assets/images/left_table_top3.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    top: 20px;
                  }
                  &:nth-child(3) {
                    background-image: url(@/assets/images/left_table_top3.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    top: 30px;
                  }
                }
              }
            }

            .el-table__row {
              color: #fff;
              .el-table__cell {
                background: none;
                font-size: 1.518rem;
                &:nth-child(1) {
                  font-size: 1.3rem;
                }
                &:nth-child(2) {
                  font-size: 1.3rem;
                }
                .cell {
                  .el-table__icon {
                    width: 45px;
                    height: 45px;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                  }
                }
              }
              &:nth-child(1) {
                .el-table__cell {
                  .cell {
                    .el-table__icon {
                      background-image: url(@/assets/images/grade1.png);
                    }
                  }
                }
              }
              &:nth-child(2) {
                .el-table__cell {
                  .cell {
                    .el-table__icon {
                      background-image: url(@/assets/images/grade2.png);
                    }
                  }
                }
              }
              &:nth-child(3) {
                .el-table__cell {
                  .cell {
                    .el-table__icon {
                      background-image: url(@/assets/images/grade3.png);
                    }
                  }
                }
              }
              &:nth-child(even) {
                background-color: #013d5c; /* 偶数行斑马纹颜色 */
              }
              &:nth-child(odd) {
                background-color: #013551; /* 奇数行斑马纹颜色 */
              }
            }

            .el-table__cell {
              border-color: var(--el-table-border-color);
              background: none;
            }

            /* 根据需要进一步自定义样式 */
            .custom-table .el-table__row:hover {
              background-color: #004B65; /* 悬停行背景色 */
              opacity: 0.8;
            }
            /* 自定义表格鼠标移入样式 */
            .el-popper.is-dark {
              background: var(--el-text-color-primary);
              border: 1px solid var(--el-text-color-primary);
              color: #fff;
            }
          }
        }
      }
    }
    .home_con_right {
      width: 40%;
      margin-left: 15px;
      .table_right_con {
        margin-top: 1.339rem;  /* 15/11.2 */
        height: calc(100% / 4 - 1.518rem);
        &:first-child {
          margin-top: 0;
        }
        .home_con_left_top_icon {
          background-image: url(@/assets/images/right_top.png);
          .home_con_left_top_icon_title_icon {
            background-image: url(@/assets/images/right_top_icon.png);
          }
        }
        .home_con_left_top_table_con {
          display: flex;
          border: 1px solid #004B65;
          border-top: none;
          border-radius: 0.893rem  /* 10/11.2 */;
          padding-bottom: 0.893rem  /* 10/11.2 */;
          box-sizing: border-box;
          background: #002138;
          .table-container {
            width: 50%;
            .custom-table {
              --el-table-bg-color: var(--el-table-bg-color);
              --el-table-border-color: var(--el-table-border-color);
              // 表格头部
              .el-table__header {
                .el-table__cell {
                  font-size: 14px;
                  color: #00BCE7;
                  background: #002138;
                  &:nth-child(1) {
                    font-size: 16px;
                  }
                }
              }
            }

            .el-table__row {
              color: #fff;
              .el-table__cell {
                background: none;
                font-size: 16px;
                &:nth-child(1) {
                  font-size: 14px;
                }
                &:nth-child(2) {
                  font-size: 16px;
                }
                &:nth-child(3) {
                  font-size: 16px;
                }
                .cell {
                  display: flex;
                  align-items: center;
                  .el-table__icon {
                    width: 16px;
                    height: 16px;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    margin-right: 5px;
                  }
                  span {
                    width: calc(100% - 16px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }
              &:nth-child(1) {
                .el-table__cell {
                  .cell {
                    .el-table__icon {
                      background-image: url(@/assets/images/num1.png);
                    }
                  }
                }
              }
              &:nth-child(2) {
                .el-table__cell {
                  .cell {
                    .el-table__icon {
                      background-image: url(@/assets/images/num2.png);
                    }
                  }
                }
              }
              &:nth-child(3) {
                .el-table__cell {
                  .cell {
                    .el-table__icon {
                      background-image: url(@/assets/images/num3.png);
                    }
                  }
                }
              }
              &:nth-child(even) {
                //background-color: #00354f; /* 偶数行斑马纹颜色 */
                background-image: url(@/assets/images/even.png); /* 偶数行斑马纹颜色 */
                background-size: 100% 100%;
                background-repeat: no-repeat;
              }
              &:nth-child(odd) {
                background-color: #001e36; /* 奇数行斑马纹颜色 */
                background-image: url(@/assets/images/odd.png); /* 奇数行斑马纹颜色 */
                background-size: 100% 100%;
                background-repeat: no-repeat;
              }
            }

            .el-table__cell {
              border-color: var(--el-table-border-color);
            }

            /* 根据需要进一步自定义样式 */
            .custom-table .el-table__row:hover {
              background-color: #004B65; /* 悬停行背景色 */
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}